<template>
  <div class="cases-wrap">
    <a-tooltip placement="right">
      <template slot="title">
        <span>全屏</span>
      </template>
      <div class="screenfull-btn" @click="clickFullscreen">
        <a-icon type="fullscreen" />
      </div>
    </a-tooltip>
    <router-view ref="casesRef"  />
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  data() {
    return {

    }
  },
  methods: {
    clickFullscreen() {
      const element = this.$refs.casesRef.$el // 指定元素进入全屏模式
      console.log('element',element);
      screenfull.toggle(element) // 退出全屏
    }
  }
}
</script>

<style lang="less" scoped>
.cases-wrap:hover{
  .screenfull-btn{
    display: flex;
  }
} 
.screenfull-btn{
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 99999;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  background: rgba(34, 37, 48, .7);
  border-radius: 4px;
  cursor: pointer;
  display: none;

  i{
    color: #fff;
    font-size: 24px;
  }

}
.cases-wrap{
  padding: 0 !important;
  overflow-x: scroll !important;
  position: relative;
  z-index: 1;
}
</style>